<template>
  <div>
    <!-- 资料区域 -->
    <div class="profile-box">
      <!-- vant的组件库有特点，标签名叫什么，就有个类叫什么 -->
      <!-- 我们的适配会在打包时自动把px转成rem -->
      <!-- 但是：行内样式转不了 -->
      <van-image round fit="cover" :src="userInfo.photo" />
      <!-- 名字和生日区域 -->
      <div class="info-box">
        <h2>{{ userInfo.name }}</h2>
        <span class="name">{{ userInfo.birthday }}</span>
      </div>
    </div>
    <!-- 快捷入口 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item style="color:#3296fa" icon="newspaper-o" text="我的作品" />
      <van-grid-item style="color:#f00" icon="star-o" text="我的收藏" />
      <van-grid-item style="color:orange" icon="tosend" text="阅读历史" />
    </van-grid>
    <!-- cell区域 -->
    <van-cell-group>
      <van-cell to="/mine/edit" icon="edit" title="编辑资料" is-link />
      <van-cell to="/chat" icon="chat-o" title="小智同学" is-link />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell @click="logout" icon="info-o" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyMine',
  computed: {
    ...mapState('user', ['userInfo'])
  },
  data () {
    return {
    }
  },
  async created () {
    // 1. 调用actions来发请求
    this.$store.dispatch('user/reqUserInfo')
  },

  methods: {
    async logout () {
      // this.$dialog
      //   .confirm({
      //     message: '是否确认退出'
      //   })
      //   .then(() => {
      //     // 1. 清空token
      //     this.$store.commit('user/setToken', {})
      //     // 2. 跳转到登录页
      //     this.$router.push('/login')
      //   }).catch(() => {
      //   })
      try {
        await this.$dialog.confirm({
          message: '是否确认退出'
        })
        // 如果来到这，证明点的是确认
        // 1. 清空token
        this.$store.commit('user/setToken', {})
        // 还要清空用户信息
        this.$store.commit('user/setUserInfo', {})
        // 2. 跳转到登录页
        this.$router.push('/login')
      } catch {}
    }
  }
}
</script>

<style scoped lang="less">
.profile-box {
  @color: #3296fa;
  height: 140px;
  background-color: @color;
  display: flex;
  align-items: center;

  .van-image {
    margin-left: 20px;
    margin-right: 10px;
    width: 120px;
    height: 120px;
  }

  .info-box {
    h2 {
      color: #fff;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .name {
      background-color: #fff;
      color: @color;
      padding: 5px 2px;
    }
  }
}
</style>
